<template>
	<view>
		<!-- 商品详情 -->
		<view class="goodsBox">
			<!-- 商品图片 -->
			<view class="imgBox">
				<image :src="baseUrl+goodsInfo.img"></image>
			</view>
			<!-- 商品介绍 -->
			<view class="textBox">
				<view class="price">
					<text class="newprice">￥{{goodsInfo.price}}</text>
					<text class="oldprice">￥{{goodsInfo.market_price}}</text>
				</view>
				<view class="title">
					{{goodsInfo.goodsname}}
				</view>
				<!-- <view style="margin-top: 40rpx;">
					<u-notice-bar :text="goodsInfo.goodsname"></u-notice-bar>
				</view> -->
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="detail">
			<image :src="item" v-for="item in imgList" :key="item"></image>
		</view>
		<!-- 底部结算 -->
		<view class="bottom">
			<view class="Left">
				<view>
					<u-icon name="chat" color="#fa3534" size="28"></u-icon><text>客服</text>
				</view>
				<view>
					<u-icon name="shopping-cart" color="#fa3534" size="28"></u-icon><text>购物车</text>
				</view>
				<view>
					<u-icon name="heart-fill" color="#fa3534" size="28"></u-icon><text>已收藏</text>
				</view>
			</view>
			<view class="Right">
				<view class="btnBox">
					<button class="goCart" @click="addCart">加入购物车</button>
					<button class="goShop">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口地址
	import {
		getGoodsInfo,
		cartAdd
	} from "../../request/app.js"
	export default {
		data() {
			return {
				baseUrl: baseUrl,
				goodsInfo: {},
				imgList: []
			}
		},
		methods: {
			//添加到购物车
			addCart() {
				cartAdd({
					uid: uni.getStorageSync("userInfo").uid,
					goodsid: this.goodsInfo.id,
					num: 1
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							title: "添加成功",
							icon: "success"
						})
						//跳转到购物车
						uni.reLaunch({
							url: "/pages/cart/cart"
						})
					}
				})
			}
		},
		//页面一加载
		onLoad(options) {
			//获取商品详情响应
			getGoodsInfo({
				id: options.id
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					this.goodsInfo = res.data.list[0]
					// 切割获取到详情图
					let list = this.goodsInfo.description.split('"')
					list.forEach((item, index) => {
						if (index % 2 != 0) {
							this.imgList.push(item)
						}
					})
				}
			})
		}
	}
</script>

<style>
	.imgBox>image {
		width: 100%;
		height: 600rpx;
	}

	.textBox {
		width: 100%;
		height: 300rpx;
	}

	.textBox>.price {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.textBox>.price>.newprice {
		color: #FF3333;
		font-size: 50rpx;
		margin-right: 40rpx;
	}

	.textBox>.price>.oldprice {
		text-decoration: line-through;
	}

	.detail>image {
		width: 100%;
		height: 800rpx;
	}

	.bottom {
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
	}

	.bottom>.Left {
		width: 40%;
		height: 100rpx;
		display: flex;
	}

	.bottom>.Left>view {
		width: 33.33%;
		text-align: center;
		padding: 0 14rpx;
		box-sizing: border-box;
	}

	.bottom>.Left text {
		font-size: 25rpx;
		color: rgb(100, 101, 102);
	}

	.bottom>.Right {
		width: 60%;
		height: 100rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
	}

	.bottom>.Right>.btnBox {
		width: 95%;
		box-sizing: border-box;
		height: 80rpx;
		margin: auto;
		display: flex;
	}

	.bottom>.Right>.btnBox>.goCart {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(to right, #ffd01e, #ff8917);
		color: #fff;
		font-size: 30rpx;
		border-radius: 60rpx 0 0 60rpx;
		font-weight: bold;
	}

	.bottom>.Right>.btnBox>.goShop {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		margin-right: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		background: linear-gradient(to right, #ff6034, #ee0a24);
		border-radius: 0 60rpx 60rpx 0;
	}
</style>
